<template>
  <h2>用户列表</h2>
  <div v-for="(item,index) in newList" :key="index" class="TotalEquipmentManagement">
    <!-- 内部布局 -->
    <a-card 
      class="EquipmentManagementContent" 
      bodyStyle="display: flex ; justify-content: center;
  align-items: center; padding: 0;"
    >
    <!-- 左侧头像 -->
    <p class="left" style="margin: 10px; ">
        <img src="./img/tx1.jpg" />
    </p>
    <!-- 右侧内容 -->
    <p class="right" style="width:200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        <h3>{{ item.DeviceName }} &emsp; {{ item.MonitoringPoints }}</h3>
        <div>最新数据时间:{{ item.LatestDataTime }}</div>
    </p>

    <!-- 权限的图标 -->
    <div class="administrators">
      <div v-if="item.tp === 1">
        <img src="./img/administrators.png">        
      </div>
      <div v-else>
        <img src="./img/plantProtector.png">        
      </div>
    </div>

  </a-card>
  </div>
  <!-- 分页 -->
  <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; bottom: 40px; right: 40px; " >
    <p style="margin-bottom: 0px;"> 共{{ list.length }}条 </p>
    <a-pagination @change="CurrentChage" v-model:current="current" :total="list.length" show-less-items />
  </div>

</template>

<script setup>

import { onMounted, ref, watch } from 'vue';

// 默认分页打开在第几页
const current = ref(1);
// 默认每页展示10条
const pageSize = ref(10)
// 定义一个新数组
const newList = ref([])


// 用户数据
const list = [
  {
    DeviceName:'洪**',
    MonitoringPoints:'♀',
    LatestDataTime:'2023-12-16 16:26:38',
    tp:1,
  },
  {
    DeviceName:'王**',
    MonitoringPoints:'裕华区',
    LatestDataTime:'2023-12-16 16:26:38',
    RecentlyLoggedInUsers:'洪**',
    tp:1,
  },
  {
    DeviceName:'**',
    MonitoringPoints:'海港区',
    LatestDataTime:'2023-12-16 16:26:38',
    RecentlyLoggedInUsers:'程**',
    tp:2,
  },
  {
    DeviceName:'****',
    MonitoringPoints:'***',
    LatestDataTime:'20**-**-** **:**:**',
    RecentlyLoggedInUsers:'***',
    tp:2,
  },
  {
    DeviceName:'****',
    MonitoringPoints:'***',
    LatestDataTime:'20**-**-** **:**:**',
    RecentlyLoggedInUsers:'***',
    tp:2,
  },
  {
    DeviceName:'****',
    MonitoringPoints:'***',
    LatestDataTime:'20**-**-** **:**:**',
    RecentlyLoggedInUsers:'***',
    tp:2,
  },
  {
    DeviceName:'****',
    MonitoringPoints:'***',
    LatestDataTime:'20**-**-** **:**:**',
    RecentlyLoggedInUsers:'***',
    tp:2,
  },
  {
    DeviceName:'****',
    MonitoringPoints:'***',
    LatestDataTime:'20**-**-** **:**:**',
    RecentlyLoggedInUsers:'***',
    tp:2,
  },
  {
    DeviceName:'****',
    MonitoringPoints:'***',
    LatestDataTime:'20**-**-** **:**:**',
    RecentlyLoggedInUsers:'***',
    tp:2,
  },
  {
    DeviceName:'****',
    MonitoringPoints:'***',
    LatestDataTime:'20**-**-** **:**:**',
    RecentlyLoggedInUsers:'***',
    tp:2,
  },
  {
    DeviceName:'****',
    MonitoringPoints:'***',
    LatestDataTime:'20**-**-** **:**:**',
    RecentlyLoggedInUsers:'***',
    tp:2,
  },
  {
    DeviceName:'****',
    MonitoringPoints:'***',
    LatestDataTime:'20**-**-** **:**:**',
    RecentlyLoggedInUsers:'***',
    tp:2,
  },
]

// 页面一打开是的时候进行渲染,调用getNewList拿到新数组进行渲染
onMounted(()=>{
  getNewList() 
})

// 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数(page,pageSize)需要同时存在
const CurrentChage = (page,pageSize) => {
  // 将新的页码赋值给current
  current.value = page
}

// 把新数组封装成函数,方便之后调用
const getNewList = () => {
  newList.value = list.slice((current.value - 1) * pageSize.value, current.value * pageSize.value)
}

// 监听current,当页码发生变化时,从新渲染页面(调用getNewList拿到新数组)
watch([current], () => {
  getNewList() 
})


</script>

<style scoped>
.administrators{
  position: absolute;
  top: 0;
  left: 10px;
}

.administrators img{
  width: 36px;
  height: 24px;
}

h3{
  margin-top: 12px;
  margin-bottom: 4px;
}

.TotalEquipmentManagement{
  width: 340px;
  /* display:flex; */
  display: inline-block;
  margin: 10px ;
  padding:0 ;
  position: relative;
}

.EquipmentManagementContent{
  display:flex;
  justify-content: center;
  align-items: center;
  /* flex-direction :column; */
}
.EquipmentManagementContent .left{
  width: 100px ;
  height: 100px ;
  margin: 0 auto;
  margin-top: 30px
}

.EquipmentManagementContent .left img{
  width: 80px ;
  height: 80px ;
  border-radius: 100%;
  margin-top: 15px;
}

</style>